<script>
import { login, register } from "../../api/otherServer";
import { Notify } from "vant";
export default {
  data() {
    return {
      username: "",
      password: "",
      repassword: "",
      pattern: /\w{4,8}/,
      patterns: /.+@.+\..+/,
      islogin: true,
    };
  },
  mounted() {},
  methods: {
    onSubmit() {
      if (this.islogin) {
        login({ email: this.username, password: this.password }, (res) => {
          if (!res.token) {
            Notify("用户或密码错误");
            return;
          }
          //登录成功需要跳转到个人中心里面并且记录token
          localStorage.setItem("token", res.token);
          this.$router.push("/my");
        });
      } else {
        if (this.password != this.repassword) {
          Notify("您好你的密码不一致请从新输入");
          return;
        }
        register(
          {
            email: this.username,
            password: this.password,
            repassword: this.repassword,
          },
          (res) => {
            Notify({ type: "success", message: "注册成功" });
            console.log(res);
          }
        );
      }
      console.log(this.username, this.password, this.repassword);
    },
    changeLlogin() {
      if (this.islogin) {
        this.islogin = false;
      } else {
        this.islogin = true;
      }
    },
  },
};
</script>
<template>
  <div class="bg_container resgister_bg" :class="{ login_bg: islogin }">
    <div class="intr_container">
      <div class="logo">
        <img src="../../assets/logo_03.png" alt="" />
      </div>
      <p>时尚购物app</p>
    </div>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <div class="login_container">
          <van-field
            v-model="username"
            name="用户邮箱"
            placeholder="用户名"
            :rules="[
              { required: true, message: '请填写用户名' },
              { patterns, message: '请填写正确的邮箱' },
            ]"
          />

          <van-field
            v-model="password"
            type="password"
            name="密码"
            placeholder="密码"
            :rules="[
              { required: true, message: '请填写密码' },
              {
                pattern,
                message: '请输入4-8位的数字,字母,下划线',
              },
            ]"
          />
          <van-field
            v-if="islogin == false"
            v-model="repassword"
            type="password"
            name="确认密码"
            placeholder="密码"
            :rules="[
              { required: true, message: '请在次确认密码' },
              {
                pattern,
                message: '请输入4-8位的数字,字母,下划线',
              },
            ]"
          />
        </div>
      </van-cell-group>
      <div style="margin: 16px; padding: 0 16px">
        <van-button round block type="primary" native-type="submit">
          {{ islogin ? "登录" : "注册" }}
        </van-button>
      </div>
    </van-form>
    <button class="button" @click="changeLlogin">
      {{ islogin ? "没有账户" : "已经有账户了" }}
    </button>
  </div>
</template>
<style lang="scss">
.van-cell-group--inset {
  margin: 0 0.56rem;
}
.login_container {
  .van-field__body input {
    width: 6.15rem;
    height: 1rem;
    padding: 0.2rem;
    background-color: transparent;
    border: 1px solid #fff;
    border-radius: 0.15rem;
    color: #fff;
  }
}

.van-cell {
  background-color: transparent !important;
}
.van-cell-group {
  background-color: transparent !important;
}
.van-cell:after {
  display: none;
}
.van-form {
  div {
    button {
      background-color: #fff;
      color: #333;
      width: 6.15rem;
      font-size: 0.25rem;
      border-radius: 0.15rem;
      height: 0.94rem;
    }
  }
}
</style>
<style lang="scss" scoped>
.bg_container {
  padding-top: 1px;
  width: 100vw;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;

  .intr_container {
    margin-bottom: 20%;
    .logo {
      & > img {
        width: 3.03rem;
      }
    }
    & > p {
      font-size: 0.42rem;
      color: #bdbdbd;
    }
    margin-top: 25%;
  }
}

.resgister_bg {
  background-image: url("../../assets/register.png");
}
.login_bg {
  background-image: url("../../assets/login.png");
}
.button {
  margin: 0 auto;
  margin-top: 1rem;
  color: #fff;
  background-color: transparent;
  border: none;
  font-size: 0.26rem;
}
</style>
